<template>
  <div class="config-page">
    <div class="page-header">
      <div class="title-with-back">
        <el-button
          type="primary"
          :icon="ArrowLeft"
          @click="$router.push('/redis-task-monitor')"
          class="blue-return-button"
          circle
        />
        <div class="title-icon">
          <div class="icon-container">
            <el-icon size="20"><Setting /></el-icon>
            <div class="icon-glow"></div>
          </div>
        </div>
        <div class="title-content">
          <div class="title-main">
            <h1>任务监控配置</h1>
            <div class="title-badge">
              <el-icon><Star /></el-icon>
              <span>Config</span>
            </div>
          </div>
          <p class="page-description">
            <el-icon><Monitor /></el-icon>
            管理Redis任务监控系统的配置参数
          </p>
        </div>
      </div>
    </div>

    <div class="page-body">
      <TaskConfigTab />
    </div>
  </div>
</template>

<script setup>
import { ArrowLeft, Setting, Star, Monitor } from '@element-plus/icons-vue'
import TaskConfigTab from './components/TaskConfigTab.vue'
</script>

<style scoped>
.config-page {
  padding: 0 0 12px 0;
}
.page-header {
  position: relative;
  display: flex;
  margin-bottom: 16px;
  padding: 16px 20px;
  border-radius: 12px;
  border: 1px solid #e4e7ed;
  background: #fff;
}
.title-with-back {
  display: flex;
  align-items: center;
  gap: 12px;
}
.title-icon .icon-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
  border-radius: 8px;
  color: white;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
}
.icon-glow {
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  background: linear-gradient(45deg, rgba(64, 158, 255, 0.2), rgba(102, 177, 255, 0.3));
  border-radius: 12px;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.title-with-back:hover .icon-glow {
  opacity: 1;
}
.title-content .title-main {
  display: flex;
  align-items: center;
  gap: 8px;
}
.title-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: #409eff;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  color: white;
}
.page-body {
  padding: 0;
}
</style>


